<template>
  <van-cell
    center
    :title="name"
    :label="author + ' - ' + name"
    @click="$router.push({ path: '/comment', query: { id: id } })"
  >
    <!-- 使用 right-icon 插槽来自定义右侧图标 -->
    <template #right-icon>
      <van-icon
        name="play-circle-o"
        size="0.6rem"
        class="search-icon"
        @touchstart="playFn"
      />
    </template>
  </van-cell>
</template>

<script>
import { useRouter } from "vue-router";
export default {
  name: "SongItem",
  props: {
    name: String, //歌名
    author: String, //作者
    id: Number, //歌曲id
  },
  setup(props) {
    const router = useRouter();
    // 跳转到播放页面
    const playFn = function () {
      router.push({
        path: "/play",
        query: {
          id: props.id,
        },
      });
    };

    return {
      playFn,
    };
  },
};
</script>

<style scoped>
.search-icon {
  font-size: 16px;
  line-height: inherit;
}
</style>
